<template>
<div class="adviceList">
  <search-block type="flex">
    <template slot="button">
      <el-button type="primary" @click="search(true)">查询</el-button>
    </template>
    <el-form inline :model="model">
      <el-form-item label="建议人:">
        <el-input v-model="model.memberName" clearable></el-input>
      </el-form-item>
      <el-form-item label="回复人:">
        <el-input v-model="model.replyName" clearable></el-input>
      </el-form-item>
      <el-form-item label="主题:">
        <el-input v-model="model.theme" clearable></el-input>
      </el-form-item>
    </el-form>
  </search-block>
  <y-table
    ref="table"
    border
    pagination
    :getDataWay="getDataWay"
    :columns="columns">
    <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="80">
      <template v-slot="{row}">
        <div class="table-buttons">
          <el-button type="primary" size="mini" @click="showReply(row)">回复</el-button>
        </div>
      </template>
    </el-table-column>
  </y-table>
  <y-form
    v-model="forms.formModel"
    :visible.sync="forms.showForm"
    title="回复建议"
    destroy-on-close
    width="900px"
    force-inner-scroll
    :form-attrs="forms.formAttrs"
    :columns="forms.formColumns"
    @ensure="ensureModel">
  </y-form>
</div>
</template>

<script>
export default {
  name: "adviceList",
  computed:{
    getDataWay(){
      return{
        dataType: 'url',
        data: this.$api.applet.queryFeedbackList,
        param: this.model
      }
    }
  },
  data(){
    return{
      model:{
        memberName: '',
        replyName: '',
        theme: ''
      },
      columns:[
        {
          label: "建议人",
          prop: "memberName",
          minWidth: '100'
        },
        {
          label: "建议主题",
          prop: "theme",
          minWidth: '100'
        },
        {
          label: "建议内容",
          prop: "content",
          minWidth: '300'
        },
        {
          label: "回复人",
          prop: "replyName",
          minWidth: '100'
        },
        {
          label: "回复内容",
          prop: "reply",
          minWidth: '300'
        }
      ],
      forms:{
        showForm: false,
        formModel:{
          id: '',
          content: '',
          reply: ''
        },
        formAttrs:{
          labelWidth: '100px',
          rules: {
            reply: [{required: true, message: "请输入回复信息", trigger: "blur"}]
          }
        },
        formColumns:[
          {
            label: "建议内容",
            prop: "content",
            comp:{
              compType: 'input',
              attrs:{
                type: 'textarea',
                readonly: true,
                autosize: true
              }
            }
          },
          {
            label: "回复内容",
            prop: "reply",
            comp:{
              compType: 'input',
              attrs:{
                type: 'textarea',
                maxlength: 100,
                showWordLimit: true,
                autosize: {
                  minRows: 3
                }
              }
            }
          }
        ]
      }
    }
  },
  methods:{
    search(jumpToFirst){
      this.$refs['table'].loadData(this.model, jumpToFirst);
    },
    showReply(row){
      this.forms.formModel = Object.gain(row, ['id', 'content', 'reply']);
      this.forms.showForm = true;
    },
    ensureModel(form){
      this.$yAxios({
        url: this.$api.applet.replyFeedback,
        data: Object.gain(form, ['id', 'reply']),
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        this.search();
      })
    }
  }
}
</script>

<style scoped>

</style>